import React, {useEffect, useState } from "react";
import { Table } from "antd";
import { getRowSpanCount2 } from "../utils/func";
import { tempArr } from "../utils/data";

function MyTables() {
  
  const columns = [
    {
      title: "线别",
      dataIndex: "name",
      key: "name",
      width: 300,
      align: "center",
      ellipsis: true,
      render: (value, _, index) => {
        let newRow = getRowSpanCount2(tempArr, "name", index, value);
        return newRow;
      }
    },
    {
      title: "A | B侧",
      dataIndex: "groupName",
      key: "groupName",
      width: 100,
      align: "center",
    },
    // {
    //   title: "吸片2位",
    //   dataIndex: "count-1",
    //   key: "gn-2",
    //   width: 100,
    //   align: "center",
    // },
    // {
    //   title: "吸片3位",
    //   dataIndex: "count-2",
    //   key: "gn-3",
    //   width: 100,
    //   align: "center",
    // },
    // {
    //   title: "校正位漫反射",
    //   dataIndex: "count-3",
    //   key: "gn-4",
    //   width: 200,
    //   align: "center",
    // },
    // {
    //   title: "装片位",
    //   dataIndex: "count-4",
    //   key: "gn-5",
    //   width: 100,
    //   align: "center",
    // },
    {
      title: "各线汇总",
      dataIndex: "total",
      key: "total",
      width: 100,
      align: "center",
      render: (value, _, index) => {
        let newRow = getRowSpanCount2(tempArr, "name", index, value);
        return newRow;
      }
    }
  ];

  // 动态生成列
  const dynamicGenerateColumns = () => {
    // console.log(tempArr[0])
    const generateColumns = [];
    if (tempArr[0].cusData1.length > 0) {
      for (const items of tempArr[0].cusData1) {
        generateColumns.push( {
          title: items.groupName,
          dataIndex: items.index,
          key: items.index,
          width: 100,
          align: "center",
          ellipsis: true
        })
      }
    }
    return generateColumns;
  }

  // 利用Map数据结构去重
  const arrayNonRepeatfy = (arr) => {
    let map = new Map();
    let array = new Array();  // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
      if(map.has(arr[i].id)) {  // 如果有该key值
        map.set(arr[i].id, true); 
      } else { 
        map.set(arr[i].id, false);   // 如果没有该key值
        array.push(arr[i]);
      }
    } 
    return array ;
  }
  
  // 先去重，然后计算总和
  const arrayNonRepeatfyAndCount = () => {
    const temp = arrayNonRepeatfy(tempArr)
    const totalCount = temp.reduce((pre, cur) => {
      return pre + cur.total
    }, 0)
    return totalCount
  }

  const [totalColumns, setColumns] = useState(columns)

  useEffect(() => {
    const newColumns = dynamicGenerateColumns()
    columns.splice(2, 0, ...newColumns)
    setColumns(columns)
  }, [])

  return (
    <Table
      style={{ padding: "30px", width: "1000px" }}
      columns={totalColumns}
      dataSource={tempArr}
      bordered
      size="small"
      rowKey={(row) => row.ids}
      summary={ () => {
        return (
          <Table.Summary.Row>
            <Table.Summary.Cell colSpan={totalColumns.length} align="right">各线总计：{ arrayNonRepeatfyAndCount() }</Table.Summary.Cell>
          </Table.Summary.Row>
        )
      }}
    />
  );
}

export default MyTables;
